<template>
  <div class="yljgdjpd">
    <div class="btn-group">
      <el-button
        type="primary"
        plain
        size="small"
        @click="showFormVisiable({ id: null }, 'add')"
      >
        新增
      </el-button>
    </div>
    <div class="table-web table-content">
      <el-table
        :data="pageData.tableData"
        height="100%"
        :header-cell-style="{
          background: '#F4F9FF',
          color: '#087CD6',
          fontSize: '14px'
        }"
        row-key="id"
        border
      >
        <el-table-column prop="name" label="评定项目" show-overflow-tooltip />
        <el-table-column prop="score" label="分数" show-overflow-tooltip />
        <el-table-column prop="level" label="级别" show-overflow-tooltip />
        <el-table-column prop="sort" label="排序号" show-overflow-tooltip />
        <el-table-column
          prop="isEnable"
          label="有效标识"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          width="200"
          header-align="center"
          align="center"
          fixed="right"
        >
          <template #default="scope">
            <el-button
              type="primary"
              plain
              size="small"
              @click="showFormVisiable(scope.row, 'add')"
            >
              添加
            </el-button>
            <el-button
              plain
              type="success"
              size="small"
              @click="showFormVisiable(scope.row, 'edit')"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              v-if="scope.row.level > 0"
              plain
              @click="delNode(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pub-dialog
      :title="pageData.formType == 'add' ? '新增' : '编辑'"
      v-model="pageData.formVisiable"
      width="1000px"
    >
      <edit-form
        :form-data="pageData.editForm"
        :form-type="pageData.formType"
        @success="getPageData"
        @cancel="pageData.formVisiable = false"
      ></edit-form>
    </pub-dialog>
  </div>
</template>
<script>
export default {
  name: 'yljgdjpdmbsz'
}
</script>
<script setup>
import { yljgStarRatingTemplateTree, yljgStarRatingDel } from '@/api/system'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import editForm from './components/edit.vue'
const pageData = reactive({
  tableData: [],
  formVisiable: false,
  editForm: {},
  formType: 'add'
})
// 获取初始化数据
const getPageData = async () => {
  let res = await yljgStarRatingTemplateTree()
  pageData.tableData = res.data
}
// 打开编辑弹窗
const showFormVisiable = (data, type) => {
  pageData.editForm.parentId = data.id
  pageData.editForm.id = data.id
  pageData.formType = type
  pageData.formVisiable = true
}
// 删除节点
const delNode = id => {
  ElMessageBox.confirm('确认删除选择的记录?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      yljgStarRatingDel(id).then(res => {
        if (res.succeed) {
          getPageData()
        }
      })
    })
    .catch(() => {})
}
onMounted(() => {
  getPageData()
})
</script>
<style lang="scss" scoped>
.yljgdjpd {
  // width: 100%;
  padding: 10px;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  .btn-group {
    // padding: 10px;
    margin-bottom: 10px !important;
  }
  .table-content {
    width: 100%;
    height: calc(100% - 80px);
  }
}
.table-web {
  font-family: 'Microsoft YaHei';
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 0px !important;
  }
  :deep(.el-button) {
    border: 0 solid transparent !important;
    background-color: transparent !important;
    font-size: 14px !important;
    padding: 6px 0px !important;
    font-family: 'Microsoft YaHei';
  }
  :deep(.el-button + .el-button) {
    margin-left: 19px !important;
  }
  :deep(.el-button--success) {
    // color: var(--el-color-success) !important;
    // &:hover {
    //   color: var(--el-color-success) !important;
    // }

    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
  :deep(.el-button--primary) {
    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
  :deep(.el-button--danger) {
    // color: var(--el-color-danger) !important;
    // &:hover {
    //   color: var(--el-color-danger) !important;
    // }
    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
}
</style>
